<template>
  <div id="home" >
    <el-container direction="vertical" style="width:1000px;height:100%;margin:auto;" >
        <el-header>
            <el-button type="primary" @click.native="handleAdd" style="float:left;">新增</el-button>
            <el-input  placeholder="请输入姓名" prefix-icon="el-icon-search" resize="both" v-model="username" @keyup.enter.native="getUserByName" style="width:200px;float:right;"></el-input>
        </el-header>
        <el-main >
            <el-table :data="users" @row-dblclick="tabledbclick">
                <el-table-column type="index" label="序号" width="50" header-align="center" >
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="100" header-align="center">
                </el-table-column>
                <el-table-column prop="email" label="邮箱" width="150" header-align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机号" width="100" header-align="center">
                </el-table-column>
                <el-table-column prop="school" label="学校" width="80" header-align="center">
                </el-table-column>
                <el-table-column prop="address" label="住址" width="80" header-align="center">
                </el-table-column>
                <el-table-column prop="introduction" label="自我介绍" width="300" header-align="center" :show-overflow-tooltip="showTooltip">
                </el-table-column>
                <el-table-column  label="操作" width="100" header-align="center" >
                    <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="text" size="small">编辑</el-button>
                        <el-button @click="handleDelete(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer>
            <!-- <el-pagination  background  layout="prev, pager, next"  :total="1000"></el-pagination> -->
        </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "home",
  data: function() {
    return {
      username: "",
      users: [],
      showTooltip: true
    };
  },
  methods: {
    getUsers: function() {
      var url = this.HOST + "/users";
      this.getUser(url);
    },
    getUserByName: function() {
      var url = null;
      if (this.username != "") {
        url = this.HOST + "/user/" + this.username;
      } else {
        url = this.HOST + "/users";
      }
      this.getUser(url);
    },
    getUser: function(url) {
      this.$http.get(url).then(response => {
        this.users = response.body;
      });
    },
    deleteUser:function(url){
        this.$http.delete(url).then((response)=>{
            if(response.body.result=='success'){
                this.$message({
                    type: "success",
                    message: "删除成功!"
                });
                this.users = [];
                this.getUsers();
            }else{
                this.$message.error('删除失败，请重试！');
            }
        });
    },
    handleAdd: function() {
      this.$router.push({ path: "/adduser" });
    },
    handleEdit: function(row) {
        var userdata = {
            id:row.id,
            username:row.username,
            email:row.email,
            school:row.school,
            phone:row.phone,
            address:row.address,
            introduction:row.introduction
        }
      this.$router.push({ path: "/edituser" ,query:{userdata:userdata}});
    },
    handleDelete: function(row) {
        var that = this;
        console.log(row);
        this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
        })
        .then(() => {
            var url = this.HOST+"/user/"+row.id;
            this.deleteUser(url);         
        })
        .catch(() => {
            this.$message({
                type: "info",
                message: "已取消删除"
            });
        });
    },
    tabledbclick:function(row,event){
      console.log(row);
      console.log(event);
      const h = this.$createElement;
      this.$notify({
          title: '恭喜恭喜',
          message: h('i', { style: 'color: teal'}, row.username+"是你的人了。。。┗|｀O′|┛ 嗷~~")
      });
  },
  },
  beforeCreate: function() {},
  created: function() {
    this.getUsers();
  },
  beforeUpdate: function() {},
  updated: function() {}
};
</script>

<style>
#home {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
